<div class="container">
  <h1 class="center sp-28" [@enter1]>进场/离场动画.</h1>

  <div [@enter2]>
    <nz-select class="m-r-8" nzAllowClear nzPlaceHolder="Choose" nzShowSearch style="width: 200px" [(ngModel)]="animation" (ngModelChange)="state = false">
      @for (option of options; track option) {
        <nz-option-group [nzLabel]="option.label">
          @for (animation of option.animations; track $index) {
            <nz-option [nzLabel]="animation" [nzValue]="animation"></nz-option>
          }
        </nz-option-group>
      }
    </nz-select>

    <button nz-button nzType="default" (click)="toggleState()">点击切换</button>
  </div>

  <div class="center-children-horizontally" [@enter3]>
    @if (state) {
      <div class="angular-img-wrapper">
        @switch (animation) {
          <!-- Bouncing -->
          @case ('bounceIn') {
            <app-angular-img [@bounceInOnEnter]="{ value: '', params: { duration: 1000 } }" [@bounceOutOnLeave] />
          }
          @case ('bounceInUp') {
            <app-angular-img [@bounceInUpOnEnter] [@bounceOutUpOnLeave] />
          }
          @case ('bounceInDown') {
            <app-angular-img [@bounceInDownOnEnter] [@bounceOutDownOnLeave] />
          }
          @case ('bounceInLeft') {
            <app-angular-img [@bounceInLeftOnEnter] [@bounceOutRightOnLeave] />
          }
          @case ('bounceInRight') {
            <app-angular-img [@bounceInRightOnEnter] [@bounceOutLeftOnLeave] />
          }
          <!-- Fading -->
          @case ('fadeInOut') {
            <app-angular-img [@fadeInOnEnter] [@fadeOutOnLeave] />
          }
          @case ('fadeInUpOutUp') {
            <app-angular-img [@fadeInUpOnEnter] [@fadeOutUpOnLeave] />
          }
          @case ('fadeInDownOutDown') {
            <app-angular-img [@fadeInDownOnEnter] [@fadeOutDownOnLeave] />
          }
          @case ('fadeInLeftOutRight') {
            <app-angular-img [@fadeInLeftOnEnter] [@fadeOutRightOnLeave] />
          }
          @case ('fadeInRightOutLeft') {
            <app-angular-img [@fadeInRightOnEnter] [@fadeOutLeftOnLeave] />
          }
          @case ('fadeInUpBigOutUpBig') {
            <app-angular-img [@fadeInUpBigOnEnter] [@fadeOutUpBigOnLeave] />
          }
          @case ('fadeInDownBigOutDownBig') {
            <app-angular-img [@fadeInDownBigOnEnter] [@fadeOutDownBigOnLeave] />
          }
          @case ('fadeInLeftBigOutRightBig') {
            <app-angular-img [@fadeInLeftBigOnEnter] [@fadeOutRightBigOnLeave] />
          }
          @case ('fadeInRightBigOutLeftBig') {
            <app-angular-img [@fadeInRightBigOnEnter] [@fadeOutLeftBigOnLeave] />
          }
          <!-- Flip -->
          @case ('flipX') {
            <app-angular-img [@flipInXOnEnter] [@flipOutXOnLeave] />
          }
          @case ('flipY') {
            <app-angular-img [@flipInYOnEnter] [@flipOutYOnLeave] />
          }
          <!-- LightSpeed -->
          @case ('lightSpeed') {
            <app-angular-img [@lightSpeedInOnEnter] [@lightSpeedOutOnLeave] />
          }
          <!-- Rotate -->
          @case ('rotateInOut') {
            <app-angular-img [@rotateInOnEnter] [@rotateOutOnLeave] />
          }
          @case ('rotateInOutDownLeft') {
            <app-angular-img [@rotateInDownLeftOnEnter] [@rotateOutDownLeftOnLeave] />
          }
          @case ('rotateInOutDownRight') {
            <app-angular-img [@rotateInDownRightOnEnter] [@rotateOutDownRightOnLeave] />
          }
          @case ('rotateInOutUpLeft') {
            <app-angular-img [@rotateInUpLeftOnEnter] [@rotateOutUpLeftOnLeave] />
          }
          @case ('rotateInOutUpRight') {
            <app-angular-img [@rotateInUpRightOnEnter] [@rotateOutUpRightOnLeave] />
          }
          <!-- Sliding -->
          @case ('slideInUpOutUp') {
            <app-angular-img [@slideInUpOnEnter] [@slideOutUpOnLeave] />
          }
          @case ('slideInDownOutDown') {
            <app-angular-img [@slideInDownOnEnter] [@slideOutDownOnLeave] />
          }
          @case ('slideInLeftOutRight') {
            <app-angular-img [@slideInLeftOnEnter] [@slideOutRightOnLeave] />
          }
          @case ('slideInRightOutLeft') {
            <app-angular-img [@slideInRightOnEnter] [@slideOutLeftOnLeave] />
          }
          <!-- Zooming -->
          @case ('zoomInOut') {
            <app-angular-img [@zoomInOnEnter] [@zoomOutOnLeave] />
          }
          @case ('zoomInUpOutUp') {
            <app-angular-img [@zoomInUpOnEnter] [@zoomOutUpOnLeave] />
          }
          @case ('zoomInDownOutDown') {
            <app-angular-img [@zoomInDownOnEnter] [@zoomOutDownOnLeave] />
          }
          @case ('zoomInLeftOutRight') {
            <app-angular-img [@zoomInLeftOnEnter] [@zoomOutRightOnLeave] />
          }
          @case ('zoomInRightOutLeft') {
            <app-angular-img [@zoomInRightOnEnter] [@zoomOutLeftOnLeave] />
          }
          <!-- Specials -->
          @case ('jackInTheBoxOnEnterHingeOnLeave') {
            <app-angular-img [@hingeOnLeave] [@jackInTheBoxOnEnter] />
          }
          @case ('rollInOut') {
            <app-angular-img [@rollInOnEnter] [@rollOutOnLeave] />
          }
          <!-- Attention Seekers -->
          @case ('bounce') {
            <app-angular-img [@bounceOnEnter] [@fadeOutOnLeave] />
          }
          @case ('flash') {
            <app-angular-img [@fadeOutOnLeave] [@flashOnEnter] />
          }
          @case ('pulse') {
            <app-angular-img [@fadeOutOnLeave] [@pulseOnEnter] />
          }
          @case ('rubberBand') {
            <app-angular-img [@fadeOutOnLeave] [@rubberBandOnEnter] />
          }
          @case ('shake') {
            <app-angular-img [@fadeOutOnLeave] [@shakeOnEnter] />
          }
          @case ('swing') {
            <app-angular-img [@fadeOutOnLeave] [@swingOnEnter] />
          }
          @case ('tada') {
            <app-angular-img [@fadeOutOnLeave] [@tadaOnEnter] />
          }
          @case ('wobble') {
            <app-angular-img [@fadeOutOnLeave] [@wobbleOnEnter] />
          }
          @case ('jello') {
            <app-angular-img [@fadeOutOnLeave] [@jelloOnEnter] />
          }
          @case ('flip') {
            <app-angular-img [@fadeOutOnLeave] [@flipOnEnter] />
          }
          <!-- Other -->
          @case ('expandCollapse') {
            <app-angular-img [@collapseOnLeave] [@expandOnEnter] />
          }
          @case ('fadeInExpandFadeOutCollapse') {
            <app-angular-img [@fadeInExpandOnEnter] [@fadeOutCollapseOnLeave] />
          }
          @case ('expandRightCollapseLeft') {
            <app-angular-img [@collapseLeftOnLeave] [@expandRightOnEnter] />
          }
          @case ('fadeInExpandRightFadeOutCollapseLeft') {
            <app-angular-img [@fadeInExpandRightOnEnter] [@fadeOutCollapseLeftOnLeave] />
          }
          @default {
            <div>Select animaion</div>
          }
        }
      </div>
    }
  </div>
</div>
